<template>
	<view class="page-container back-white">
		<view class="form">
			<view class="row-box sb input-grid">
				<text class="s30 bold">收货人</text>
				<view class="back-grey radius-base pcol-s prow-l row-box">
					<input class="input" type="text" v-model="name" maxlength="9"
						placeholder-class="placeholder" placeholder="请输入姓名"
					>
				</view>
			</view>
			<view class="row-box sb input-grid">
				<text class="s30 bold">手机号码</text>
				<view class="back-grey radius-base pcol-s prow-l row-box">
					<input class="input" type="number" v-model="tel" maxlength="11"
						placeholder-class="placeholder" placeholder="请输入手机号码"
					>
				</view>
			</view>
			<view class="row-box sb input-grid">
				<text class="s30 bold">所在校区</text>
				<view class="row-box back-grey radius-base pcol-s prow-l input" @click="goCollegeSelect()">
					<text v-if="schoolId">{{ schoolName }}</text>
					<text v-else class="grey-light">请选择校区</text>
				</view>
			</view>
			<view class="row-box sb input-grid">
				<text class="s30 bold">详细地址</text>
				<textarea class="back-grey radius-base pcol-s prow-l textarea" v-model="detailAdd" :maxlength="60"
					placeholder-style="fontSize: 28rpx;color: #999999;line-height: 36rpx;"
					placeholder="请输入详细地址"
				>
				</textarea>
			</view>
			<view class="row-box sb mt-l">
				<text class="s30 bold">设为默认收货地址</text>
				<u-switch v-model="status" :active-color="primaryColor" inactive-color="#999999" size="48"></u-switch>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box">
			<view class="submit-button back-primary" @click="saveHandle()">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, // 新增0 编辑1
				id: null, // 修改需要id
				name: '',
				tel: '',
				schoolId: null, // 学校id
				schoolName: '', // 学校name
				detailAdd: '',
				status: false,
				
			};
		},
		onLoad(options) {
			if (options.address) { // 编辑地址传参
				this.type = 1
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				})
				let address = JSON.parse(decodeURIComponent(options.address))
				this.id = Number(address.id)
				this.name = address.name
				this.tel = address.tel
				this.schoolId = address.schoolId
				this.schoolName = address.schoolName
				this.detailAdd = address.detailAdd
				this.status = address.status ? true : false
			} else {
				this.type = 0
				uni.setNavigationBarTitle({
					title: '新增收货地址'
				})
			}
		},
		methods: {
			// 跳转选择学校
			goCollegeSelect() {
				uni.navigateTo({
					url: '/pages/subPackage/platform/college_list/college_list'
				})
			},
			
			// 保存地址
			saveHandle() {
				// 检查用户输入
				if (!this.name) {
					return uni.showToast({
						icon: 'none',
						title: '未填写姓名！'
					})
				} else if (!this.tel) {
					return uni.showToast({
						icon: 'none',
						title: '未填写手机号码！'
					})
				} else if (this.tel.length!=11) {
					return uni.showToast({
						icon: 'none',
						title: '手机号码必须是11位！'
					})
				} else if (!this.verifyMobilePhone(this.tel)) {
					return uni.showToast({
						icon: 'none',
						title: '手机号码格式有误！'
					})
				} else if (!this.schoolId) {
					return uni.showToast({
						icon: 'none',
						title: '未选择所在校区！'
					})
				} else if (!this.detailAdd) {
					return uni.showToast({
						icon: 'none',
						title: '未填写详细地址！'
					})
				}
				// 处理参数
				let params = {
					name: this.name,
					tel: this.tel,
					schoolId: this.schoolId,
					detailAdd: this.detailAdd,
					status: this.status?1:0
				}
				if (this.id) params['id'] = this.id
				this.$api.EditMyAddress(params).then(res => {
					console.log('EditMyAddress-success', res)
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1,
							success: () => {
								uni.showToast({
									icon: 'none',
									title: `${this.type==0?'新增':'修改'}成功！`
								})
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('EditMyAddress-fail', err)
					
				})
			}
		},
	}
</script>

<style lang="scss">
.page-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	// 表单
	.form {
		padding: 32rpx;
		.input-grid {
			padding: 20rpx 0;
			display: grid;
			grid-template-columns: 1fr 528rpx;
			.input {
				box-sizing: border-box;
				width: 100%;
				height: 108rpx;
			}
			.textarea {
				height: 212rpx;
			}
			.placeholder {
				fontSize: 28rpx;
				color: #999999;
				line-height: 148rpx;
			}
		}
	}
}
</style>
